<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>main</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style>
        #footer {
            height: 52px;
            line-height: 52px;
            background-size: 11px 52px;
            width: 100%;
            position: absolute;
            bottom: 0px;
            text-align: center;
        }

        #footer h5 {
            color: white;
        }

        #footerList {
            height: 52px;
            width: 100%;
            position: relative;
            border-top: 1px solid #f2f2f2;
        }

        #footerList .list_item {
            float: left;
            height: 52px;
            width: 20%;
            position: relative;
        }

        #footerList .homepage {
            background: url(../image/nav/homeline@3x.png) center 8px no-repeat;
            background-size: 22px 21px;
        }

        #footerList .homepage.active {
            background: url(../image/nav/homelight@3x1.png) center 5px no-repeat;
            background-size: 28px 27px;
        }

        #footerList .parttime {
            background: url(../image/nav/parttimeline@3x.png) center 8px no-repeat;
            background-size: 22px 21px;
        }

        #footerList .parttime.active {
            background: url(../image/nav/parttimelight@3x1.png) center 5px no-repeat;
            background-size: 26px 25px;
        }
        #footerList .recommend {
            background: url(../image/nav/recommendlight.png) center 5px no-repeat;
            background-size: 26px 25px;
        }
        #footerList .recommend.active {
            background: url(../image/nav/recommend.png) center 5px no-repeat;
            background-size: 26px 25px;
        }
        #footerList .find {
            background: url(../image/nav/findline@3x.png) center 8px no-repeat;
            background-size: 22px 21px;
        }

        #footerList .find.active {
            background: url(../image/nav/findlight@3x1.png) center 5px no-repeat;
            background-size: 26px 25px;
        }

        #footerList .my {
            background: url(../image/nav/myline@3x.png) center 8px no-repeat;
            background-size: 21px 20px;
        }

        #footerList .my.active {
            background: url(../image/nav/mylight@3x1.png) center 5px no-repeat;
            background-size: 24px 23px;
        }

        #footerList .list_item .text {
            position: absolute;
            width: 100%;
            height: 12px;
            line-height: 12px;
            left: 0;
            bottom: 5px;
            color: #515151;
            font-size: 11px;
        }

        #footerList .list_item.active .text {
            color: #FFDCC0;
            font-size: 13px;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <div id="header"></div>
        <div id="main"></div>
        <div id="footer">
            <ul id="footerList">
                <li class="list_item homepage active" onclick="selectpages(0);" tapmode>
                    <span class="text">首页</span>
                </li>
                <li class="list_item parttime" onclick="selectpages(1);" tapmode>
                    <span class="text">分类</span>
                </li>
                <li class="list_item recommend" onclick="selectpages(2);" tapmode>
                    <span class="text">推荐</span>
                </li>
                <li class="list_item find" onclick="selectpages(3);" tapmode>
                    <span class="text">发现</span>
                </li>
                <li class="list_item my" onclick="selectpages(4);" tapmode>
                    <span class="text">我的</span>
                </li>
            </ul>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    var aFooterList = $api.domAll('#footerList .list_item');
    var listBar = $api.dom('#footerList .list_bar');
    var frameJson = {
        '0': 'homepage',
        '1': 'parttime',
        '2': 'recommend',
        '3': 'find',
        '4': 'my',
    };
    var selectpages = function(index) {
  		for (var i = 0; i < 5; i++) {
  			if (i == index) {
  				$api.addCls(aFooterList[index], 'active');
  			} else {
  				$api.removeCls(aFooterList[i], 'active');
  			}
  		};
  		openHTML(index);
  	};

    apiready = function() {

  		api.setStatusBarStyle({
  			style: 'dark'
  		});

  		api.setScreenOrientation({
  			orientation: 'auto_portrait'
  		});
  		api.setWinAttr({
  			bounces: false
  		});
  		var main = $api.byId('main');
  		var mainPos = $api.offset(main);
  		var footer = $api.byId('footer');
  		var footerPos = $api.offset(footer);
  		window.openHTML = function(index) {
  			if (api.pageParam.flag == "first" && index == 0) {
  				api.openFrame({
  					name: frameJson[index],
  					url: frameJson[index] + '.html',
  					bounces: false,
  					rect: {
  						x: 0,
  						y: 0,
  						w: 'auto',
  						h: api.frameHeight - mainPos.h - footerPos.h
  					},
  				});
  			}
  				api.openFrame({
  					name: frameJson[index],
  					url: frameJson[index] + '.html',
  					bounces: false,
  					rect: {
  						x: 0,
  						y: 0,
  						w: 'auto',
  						h: api.frameHeight - mainPos.h - footerPos.h
  					},
  				});

  		}
  		openHTML(0);
  	};
</script>

</html>
